﻿@page "/fetchdata"
@using Blazored.LocalStorage;

<PageTitle>Weather forecast</PageTitle>

<div style="background-color :lightblue">

    <p>
        日期
        <input type="datetime-local" @bind-value="one!.Date" />
    </p>
    <p>
        温度
        <input type="number" @bind-value="one!.TemperatureC" />
    </p>
    <p>
        <input @bind-value="one!.Summary" />
    </p>
    <p>
        <input type="color" @bind-value="one!.SkyColor" />
    </p>
    <button @onclick="Add" class="btn btn-primary">新添</button>
</div>

@if (forecasts == null)
{
    <p><em>无数据...</em></p>
}
else
{


    <table class="table">
        <thead>
            <tr>
                <th>Date</th>
                <th>Temp. (C)</th>
                <th>Temp. (F)</th>
                <th>Summary</th>
                <th>SkyColor</th>
                <th></th>
                <th></th>
            </tr>
        </thead>
        <tbody>
            @foreach (var forecast in forecasts)
            {
                <tr>
                    <td>
                        <input @bind-value="forecast.Date" />
                    </td>
                    <td>
                        <input @bind-value="forecast.TemperatureC" />
                    </td>
                    <td>@forecast.TemperatureF</td>
                    <td>
                        <input @bind-value="forecast.Summary" />
                    </td>
                    <td>
                        <input type="color" @bind-value="forecast.SkyColor" />
                    </td>
                    <td>
                        <button @onclick="Edit" class="btn btn-primary">编辑</button>
                    </td>
                    <td>
                        <button @onclick="(()=>Delete(forecast))" class="btn btn-warning">删除</button>
                    </td>
                </tr>
            }
        </tbody>
    </table>

    <button @onclick="Clear" class="btn btn-danger">清空</button>

}

@code {


    public class WeatherForecast
    {
        public DateTime Date { get; set; } = DateTime.Now;

        public int TemperatureC { get; set; }

        public int TemperatureF => 32 + (int)(TemperatureC / 0.5556);

        public string? Summary { get; set; } = "阳光明媚";

        public string? SkyColor { get; set; }

    }

    [Inject] ILocalStorageService? localStore { get; set; }


    private List<WeatherForecast>? forecasts;
    private WeatherForecast? one = new WeatherForecast();

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {

            forecasts = await localStore!.GetItemAsync<List<WeatherForecast>>("forecasts");
            if (forecasts == null)
            {
                forecasts = new List<WeatherForecast>();
                await localStore!.SetItemAsync("forecasts", forecasts);
            }

            StateHasChanged();

        }
    }

    async void Add()
    {
        forecasts!.Add(one!);
        one = new WeatherForecast();
        await localStore!.SetItemAsync("forecasts", forecasts);
    }
    async void Edit()
    {
        await localStore!.SetItemAsync("forecasts", forecasts);
    }
    async void Delete(WeatherForecast weather)
    {
        forecasts!.Remove(weather);
        await localStore!.SetItemAsync("forecasts", forecasts);
    }

    async void Clear()
    {
        forecasts!.Clear();
        await localStore!.ClearAsync();
    }
}
